<template>
  <s-popup
    v-model="show"
    position="bottom"
    round
    :mask="true"
    mask-close
  >
    <view class="formContainer">
      <view class="formTitle">{{ isEdit ? "编辑问卷" : "新建问卷" }}</view>

      <view class="formItem">
        <view class="formLabel">问卷标题</view>
        <uni-easyinput
          v-model="formData.title"
          placeholder="请输入问卷标题"
          clearable
        />
      </view>

      <view class="formItem">
        <view class="formLabel">问卷描述</view>
        <uni-easyinput
          v-model="formData.description"
          type="textarea"
          placeholder="请输入问卷描述(可选)"
          clearable
        />
      </view>

      <view class="buttonGroup">
        <s-button type="default" size="small" @click="$emit('cancel')">
          取消
        </s-button>
        <s-button
          type="primary"
          size="small"
          @click="$emit('submit', formData)"
          :loading="loading"
        >
          {{ isEdit ? "保存修改" : "创建问卷" }}
        </s-button>
      </view>
    </view>
  </s-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    initialData: {
      type: Object,
      default: () => ({
        id: "",
        title: "",
        description: ""
      })
    }
  },
  data() {
    return {
      formData: {
        id: "",
        title: "",
        description: ""
      }
    };
  },
  watch: {
    initialData: {
      immediate: true,
      handler(val) {
        this.formData = { ...val };
      }
    }
  }
};
</script>

<style scoped>
.formContainer {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
}

.formTitle {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.formItem {
  margin-bottom: 30rpx;
}

.formLabel {
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #666;
}

.buttonGroup {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
}

.buttonGroup button {
  flex: 1;
  margin: 0 10rpx;
}
</style>